<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/reset/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<div id="warp">
			<div id="start">
				<br />
				<br />
				<br />
				🏁点击开始🏁<br />
				<br />
				<br />
				规则:
				<br />
				<br />
				灰太狼 +10 分 🎁
				<br />
				<br />
				<br />
				小灰灰 -10 分 👿
				<br />
				<br />
				<br />
				<br />
				来挑战吧💪
			</div>
			<span id="scrouNum">0</span>
			<div id="timeLong">

			</div>
		</div>
	</body>
	<script type="text/javascript">

		// 判断
		 function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return false;
            } else {
                return true;
            }
        }

        var pc = browserRedirect();



		var arr = [
			[40, 121],
			[25, 221],
			[25, 306],
			[145, 149],
			[125, 264],
			[123, 371],
			[250, 121],
			[240, 236],
			[227, 334]
		];
		var warp = document.getElementById('warp');
		var scrouNum = document.getElementById('scrouNum');
		var startDiv = document.getElementById('start');
		var timeLong = document.getElementById('timeLong');
		var speed = 100;
		var difficulty = 80; //困难度->速度
		var xhhProbability = 70; //小灰灰出现概率
		var gameTime = 30; //游戏时间
		var scrou = 0;
		var index;
		var reNum;
		var childBool = false;
		var duangBool = false;
		var stactTimer;
		var gameDjs;

		if (pc) {
			startDiv.onclick = gameStart;
		}else {
			startDiv.addEventListener('touchstart',gameStart(),false);
		}


		function upAndDown(img, index) {
			clearInterval(upTimer);
			var upDownBool = false;
			var xhh = xhhOrhtl();
			var upTimer = setInterval(function() {
				if(upDownBool == false) {
					index++;
				} else {
					index--;
				}
				if(index >= 0) {
					img.src = 'img/' + xhh + index + '.png';
				} else {
					warp.removeChild(img);
				}
				if(index >= 5) {
					upDownBool = true;
				} else if(index < 0) {
					upDownBool = false;
					clearInterval(upTimer);
				}
				if (pc) {
					img.onclick = function() {
						if(xhh == 'x') {
							scrou -= 10;
						} else {
							scrou += 10;
						}

						scrouNum.innerHTML = scrou;
						this.onclick = '';
						clearInterval(upTimer);
						clearInterval(duangTimer);
						index = 5;
						var duangTimer = setInterval(function() {
							index++;
							img.src = 'img/' + xhh + index + '.png';
							if(index >= 9) {
								clearInterval(duangTimer);
								warp.removeChild(img);
							}
						}, speed);
					};
				}else{
					img.addEventListener('touchstart', function(){
						if(xhh == 'x') {
							scrou -= 10;
						} else {
							scrou += 10;
						}

						scrouNum.innerHTML = scrou;
						clearInterval(upTimer);
						clearInterval(duangTimer);
						index = 5;
						var duangTimer = setInterval(function() {
							index++;
							img.src = 'img/' + xhh + index + '.png';
							if(index >= 9) {
								clearInterval(duangTimer);
								warp.removeChild(img);
							}
						}, speed);
					}, false);
				}
			}, speed);
		}

		function reSelect(img) {
			while(childBool == false) {
				var imgs = warp.getElementsByTagName('img');
				if(imgs.length == 0) {
					childBool = true;
				}
				for(var i = 0; i < imgs.length; i++) {
					childBool = true;
					if(parseInt(imgs[i].style.bottom) == parseInt(img.style.bottom)) {
						childBool = false;
						return;
					}
				}
			}
		}

		function xhhOrhtl() {
			var xhh;
			var xhhNum = Math.floor(Math.random() * 100 + 1);
			if(xhhNum <= xhhProbability) {
				xhh = 'x';
			} else {
				xhh = 'h';
			}
			return xhh;
		}

		function djs() {
			timeLong = document.getElementById('timeLong');
			var timeLongWidth = timeLong.offsetWidth;
			var change = timeLongWidth / gameTime;
			gameDjs = setInterval(function() {
				gameTime--;
				if(gameTime <= 0) {
					clearInterval(gameDjs);
					timeLong.style.width = '0px';
					gameOver();
					return;
				}
				timeLong.style.width = timeLongWidth - change + 'px';
				timeLongWidth = timeLong.offsetWidth;
			}, 1000);
		}

		function gameStart() {
			scrou = 0
			scrouNum.innerHTML = scrou;
			startDiv.style.display = 'none';
			stactTimer = setInterval(function() {
				index = Math.floor(Math.random() * 9);
				var img = document.createElement('img');
				img.style.left = arr[index][0] + 'px';
				img.style.bottom = arr[index][1] + 'px';
				reSelect(img);
				if(childBool == true) {
					warp.appendChild(img);
					upAndDown(img, -1);
					childBool = false;
				} else {
					return;
				}
			}, difficulty);
			djs();
		}

		function gameOver(who) {
			clearInterval(stactTimer);
			clearInterval(gameDjs);
			alert('👿GAME OVER👿 📰分数:' + scrouNum.innerHTML + '分 🎁🎁🎁👏');
			startDiv.style.display = 'block';
			timeLong.style.width = '213px';
			gameTime = 30;
			scrou = 0;
		}
	</script>

</html>